<template>
    <div class="custom-plan">
        <el-card shadow="never" v-if="baseInfo">
            <div class="centent-title" v-if="isShow">
                <div class="title">基本信息</div>
                <el-button v-if="!isShow" type="primary" @click="goBack">返回</el-button>
            </div>
            <div class="basic-div">
                <img v-if="imageUrl" class="head-portrait" :src="imageUrl" />
                <span class="span-style">{{studentData.studentName}}</span>
            </div>
            <div class="line-div"></div>
            <el-form label-width="100px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="学号:">{{studentData.studentId}}</el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="年级:">
                            <span>{{studentData.entryGrade}}</span>
                            <span v-if="studentData.entryGrade">级</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学院:">
                            <span>{{studentData.ownDepartmentIdI18n}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="专业:">
                            <span>{{studentData.ownMajorI18n}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="培养层次:">
                            <span>{{studentData.trainingLevelI18n}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="入学时间:">
                            <span>{{studentData.enrolDate}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学制:">
                            <span>{{studentData.lengthSchooling}}</span>
                            <span v-if="studentData.lengthSchooling">年</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="导师:">
                            <span>{{studentData.teacherName}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="培养方案:">
                            <a
                                @click="catCulture(studentData.cultureId)"
                            >{{studentData.cultureName}}</a>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-card shadow="never" v-if="baseInfo">
            <div class="centent-title" v-if="isShow">
                <div class="title">自定义计划</div>
                <el-button type="primary" @click="makePlan">{{$t('minor.culturePlan.makePlanBtn')}}</el-button>
            </div>
            <div class="my-title" v-else-if="showChapter">
                <div class="title">我的微专业个人计划</div>
                <div v-if="showPlanFlag" class="my-centent-title">
                    <el-form :inline="true">
                        <el-form-item label="微专业辅修个人计划">
                            <el-select
                                v-model="coursePlanValue"
                                @change="courseChange"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in coursePlanList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-button
                        type="primary"
                        @click="makePlan"
                    >{{$t('minor.culturePlan.makePlanBtn')}}</el-button>
                </div>
                <div v-else style="text-align:center">
                    <img src="static/images/no-cultureplan.png" />
                    <p>{{errorMsg}}</p>
                </div>
            </div>
            <div class="centent-title" v-else>
                <div class="title">微专业个人计划</div>
            </div>
            <div v-if="showPlanFlag" class="content-container">
                <div class="title">{{$t('minor.culturePlan.creditFinshTitle')}}</div>
                <edu-table
                    class="score-table"
                    :merge="true"
                    :border="true"
                    :data="scoreData"
                    :pagination="false"
                    :selection="false"
                    :order="false"
                >
                    <el-table-column
                        label="课程类别"
                        align="center"
                        show-overflow-tooltip
                        min-width="120"
                    >
                        <template slot-scope="props">{{props.row.courseType}}</template>
                    </el-table-column>
                    <el-table-column
                        label="必修课程"
                        align="center"
                        show-overflow-tooltip
                        min-width="120"
                    >
                        <template slot-scope="props">{{props.row.a}}</template>
                    </el-table-column>
                    <el-table-column
                        label="选修课程"
                        align="center"
                        show-overflow-tooltip
                        min-width="120"
                    >
                        <template slot-scope="props">{{props.row.b}}</template>
                    </el-table-column>
                    <el-table-column
                        label="其它课程"
                        align="center"
                        show-overflow-tooltip
                        min-width="80"
                    >
                        <template slot-scope="props">{{props.row.c}}</template>
                    </el-table-column>
                </edu-table>
                <div class="my-cultrue-title" v-if="showChapter">
                    <div class="title">{{studentData.majorNameCn}}专业个人培养计划</div>
                    <div>
                        <i class="el-icon-refresh font_style"></i>
                        <a @click="refresh" style="margin:0 5px 0 0;">刷新</a>
                        <i class="el-icon-warning font_style"></i>
                        <a @click="aboutPay">关于缴费</a>
                    </div>
                </div>
                <div v-else class="title">{{studentData.majorNameCn}}专业个人培养计划</div>
                <edu-table
                    class="score-table"
                    :border="true"
                    :merge="true"
                    :data="planData"
                    :pagination="false"
                    :selection="false"
                    :order="false"
                >
                    <el-table-column prop="courseType" align="center" min-width="120" label="课程类别"></el-table-column>
                    <el-table-column prop="courseCode" align="center" min-width="120" label="课程代码"></el-table-column>
                    <el-table-column
                        align="center"
                        min-width="180"
                        show-overflow-tooltip
                        label="课程名称"
                    >
                        <template slot-scope="props">
                            <a @click="viewCourse(props.row)">{{props.row.name}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="divideName"
                        align="center"
                        show-overflow-tooltip
                        min-width="150"
                        label="几选几分组"
                    ></el-table-column>
                    <el-table-column prop="credits" align="center" min-width="100" label="学分"></el-table-column>
                    <el-table-column prop="week" align="center" min-width="120" label="学时/周数"></el-table-column>
                    <el-table-column align="center" min-width="120" label="考试/考查">
                        <template slot-scope="props">
                            <span>{{props.row.examModeName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="remarks"
                        align="center"
                        show-overflow-tooltip
                        min-width="200"
                        label="备注"
                    ></el-table-column>
                    <el-table-column prop="selCourse" align="center" min-width="120" label="选课情况"></el-table-column>
                    <el-table-column prop="score" align="center" min-width="100" label="成绩"></el-table-column>
                    <el-table-column prop="isScorePass" align="center" min-width="120" label="完成情况"></el-table-column>
                    <el-table-column align="center" min-width="120" fixed="right" label="缴费情况">
                        <template slot-scope="props">
                            <span
                                :class="props.row.isPay==='未缴费'?'not-pay':'is-pay'"
                            >{{props.row.isPay}}</span>
                        </template>
                    </el-table-column>
                </edu-table>
            </div>
            <div v-if="showPlanFlag" class="line-div" style="margin-top:16px;"></div>
            <div v-if="showChapter && showPlanFlag" class="align-right" style="margin: 0 0 5px 0;">
                <el-button @click="openPayment" type="primary">前往缴费</el-button>
            </div>

            <edu-dialog autoHeight="true" title="缴费列表" width="80%" ref="payment">
                <edu-table
                    class="score-table"
                    :border="true"
                    :merge="true"
                    :data="paymentDialogData"
                    :pagination="false"
                    :selection="false"
                    :order="false"
                >
                    <el-table-column
                        v-if="paymentSelect"
                        :render-header="labelHead"
                        align="center"
                        min-width="50"
                    >
                        <template slot-scope="props">
                            <div
                                v-if="props.row.isPay=='已缴费'"
                                style="color:#009900"
                            >{{props.row.isPay}}</div>
                            <el-checkbox
                                v-else
                                class="checkbox"
                                v-model="props.row.paySelect"
                                @change="e=>{payChildChange(e,props)}"
                            ></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column v-else align="center" min-width="50">
                        <template slot-scope="props">
                            <div style="color:#009900">{{props.row.isPay}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="courseCode" align="center" min-width="120" label="课程代码"></el-table-column>
                    <el-table-column
                        align="center"
                        min-width="180"
                        show-overflow-tooltip
                        label="课程名称"
                    >
                        <template slot-scope="props">
                            <a @click="viewCourse(props.row)">{{props.row.name}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="credits" align="center" min-width="100" label="学分"></el-table-column>
                    <el-table-column prop="week" align="center" min-width="120" label="学时/周数"></el-table-column>
                    <el-table-column align="center" min-width="120" label="考试/考查">
                        <template slot-scope="props">
                            <span>{{props.row.examModeName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="remarks"
                        align="center"
                        show-overflow-tooltip
                        min-width="200"
                        label="备注"
                    ></el-table-column>
                </edu-table>
                <span slot="buttons">
                    <el-button type="primary" @click="paymentClose">{{customBtnName}}</el-button>
                    <payment-button v-if="showPaymentBtn" :params="params">{{paymentBtnName}}</payment-button>
                </span>
            </edu-dialog>
        </el-card>
        <edu-dialog :title="payDialogTitle" width="30%" ref="signDialog">
            <div>个人计划中制定的课程需完成缴费才可生效，否则无法完成此课程的辅修，需点击下方前往缴费按钮对单个或多个课程完成缴费！</div>
            <span slot="buttons">
                <el-button @click="closeSignDialog">{{$t('message.cancel')}}</el-button>
                <el-button type="primary" @click="closeSignDialog">确认</el-button>
            </span>
        </edu-dialog>
        <edu-dialog title="培养计划制定" autoHeight="true" size="large" ref="planDialog">
            <edu-table
                class="score-table"
                :border="true"
                :merge="true"
                :data="planDialogData"
                :pagination="false"
                :selection="false"
                :order="false"
            >
                <el-table-column prop="courseType" align="center" min-width="120" label="课程类别"></el-table-column>
                <el-table-column prop="courseCode" align="center" min-width="120" label="课程代码"></el-table-column>
                <el-table-column align="center" min-width="180" label="课程名称">
                    <template slot-scope="props">
                        <a @click="viewCourse(props.row)">{{props.row.name}}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="divideName" align="center" min-width="150" label="几选几分组"></el-table-column>
                <el-table-column prop="credits" align="center" min-width="100" label="学分"></el-table-column>
                <el-table-column prop="week" align="center" min-width="120" label="学时/周数"></el-table-column>
                <el-table-column align="center" min-width="120" label="考试/考查">
                    <template slot-scope="props">
                        <span>{{props.row.examModeName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remarks"
                    align="center"
                    show-overflow-tooltip
                    min-width="200"
                    label="备注"
                ></el-table-column>
                <el-table-column prop="selCourse" align="center" min-width="120" label="选课情况"></el-table-column>
                <el-table-column prop="score" align="center" min-width="100" label="成绩"></el-table-column>
                <el-table-column prop="isScorePass" align="center" min-width="120" label="完成情况"></el-table-column>
                <el-table-column align="center" min-width="120" fixed="right" label="操作">
                    <template slot-scope="props">
                        <a
                            :class="props.row.select=='选择'?'a-blue':'a-red'"
                            @click="selectClick(props)"
                        >{{props.row.select}}</a>
                    </template>
                </el-table-column>
            </edu-table>
            <span slot="buttons">
                <el-button @click="cancelSelectForm">{{$t('message.cancel')}}</el-button>
                <el-button type="primary" @click="confirmSelectForm">{{$t('message.confirm')}}</el-button>
                <el-button type="primary" @click="submitSelectForm">{{$t('message.submit')}}</el-button>
            </span>
        </edu-dialog>
        <div v-if="!baseInfo">
            <cat-chapter @goBack="baseInfo=true" :templateId="templateId" :type="type" />
        </div>
        <scheme-check
            ref="schemeCheck"
            :show="schemeCheck"
            @closeWorkFlowDialog="closeSchemeCheckDialog"
            @submitSuccess="submitSuccess"
            :id="studentData.cultureId"
            :planId="studentData.id"
            type="62"
        />
        <!-- 查看课程 -->
        <edu-dialog title="查看课程" width="35%" ref="courseDetailDialog">
            <el-form>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课程代码：">
                            <span>{{courseDetail.courseCode}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="课程名称：">
                            <span>{{courseDetail.name}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="周数：">
                            <span>{{courseDetail.weeks}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="周学时：">
                            <span>{{courseDetail.weekSchoolHour_}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课时：">
                            <span>{{courseDetail.period}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学分：">
                            <span>{{courseDetail.credits}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="培养层次：">
                            <span>{{courseDetail.trainingLevelName}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="buttons">
                <el-button @click="closeDetailDialog">返回</el-button>
            </span>
        </edu-dialog>
    </div>
</template>

<script>
import {
    findMinorStudentCulture,
    getMinorCulturePlan,
    findUserInfoByIdType,
    downloadimage,
    setCulturePlan,
    catCulturePlan,
    findAllMinorStudentCulture
} from "common/src/api/minor/minorCulturePlanManager";
import ChapterSet from "./ChapterSet";
import CatChapter from "./CatChapter";
import SchemeCheck from "./SchemeCheck";
export default {
    name: "CustomPlan",
    props: {
        studentId: {
            type: String,
            default: ""
        },
        entranceTerm: {
            type: String,
            default: ""
        },
        isShow: {
            type: Boolean,
            default: true
        },
        isMine: {
            type: Boolean,
            default: true
        },
        showChapter: {
            type: Boolean,
            default: false
        },
        byStuSelf: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            showPlanFlag: true,
            templateId: 0,
            type: 1,
            cultureSchemeId: "",
            baseInfo: true,
            studentData: {},
            scoreData: [],
            planData: [],
            planDialogData: [],
            paymentDialogData: [],
            imageUrl: "",
            plan: [],
            courseDetail: {},
            coursePlanList: [],
            coursePlanValue: "",
            params: {},
            term: "",
            schemeCheck: false,
            headData: [],
            relGroups: [],
            errorMsg: "",
            selectAllFlag: false,
            indeterminate: false,
            paymentSelect: true,
            paymentBtnName: "前往缴费",
            showPaymentBtn: true,
            customBtnName: "关闭"
        };
    },
    components: { ChapterSet, SchemeCheck, CatChapter },
    mounted() {
        this.getTemplate("init");
    },
    methods: {
        refresh() {
            this.getTemplate("init");
        },
        labelHead(h, { column, $index }) {
            //设置表头为checkbox
            return h(
                "el-checkbox",
                {
                    class: {
                        checkedAll: true
                    },
                    props: {
                        indeterminate: this.indeterminate,
                        value: this.selectAllFlag
                    },
                    on: {
                        change: this.selectAllClick
                    }
                },
                [""]
            );
        },
        payChildChange(val, { row, $index }) {
            this.paymentDialogData = this.paymentDialogData.map((el, index) => {
                if (index == $index) {
                    el.paySelect = val;
                }
                return el;
            });
            let data = this.paymentDialogData.filter(el => {
                return el.isPay == "未缴费";
            });
            let selectData = data.filter(el => {
                return el.paySelect == true;
            });
            if (selectData.length == 0) {
                this.indeterminate = false;
                this.selectAllFlag = false;
            } else if (data.length == selectData.length) {
                this.indeterminate = false;
                this.selectAllFlag = true;
            } else {
                this.indeterminate = true;
                this.selectAllFlag = false;
            }
            this.dealCourseCode();
        },
        dealCourseCode() {
            let courseCode = this.paymentDialogData
                .filter(el => {
                    return el.paySelect == true;
                })
                .map(el => {
                    return el.courseCode;
                });
            this.params.courseCode = courseCode.join(",");
            this.params.callBackData.courseCode = courseCode.join(",");
        },
        selectAllClick(val) {
            if (val) {
                this.indeterminate = false;
                this.selectAllFlag = true;
                this.paymentDialogData = this.paymentDialogData.map(el => {
                    if (el.isPay != "已缴费") {
                        el.paySelect = true;
                    }
                    return el;
                });
                this.dealCourseCode();
            } else {
                this.indeterminate = false;
                this.selectAllFlag = false;
                this.paymentDialogData = this.paymentDialogData.map(el => {
                    if (el.isPay != "已缴费") {
                        el.paySelect = false;
                    }
                    return el;
                });
            }
            // 全选 paymentDialogData payStatus:true
        },
        paymentClose() {
            this.$refs.payment.close();
        },
        openPayment() {
            if (this.studentData.statusPlan == 4) {
                this.$message({
                    type: "warning",
                    message: `培养计划审核未通过，请重新提交并审核通过后再进行缴费`
                });
                return;
            } else if (this.studentData.statusPlan == 2) {
                this.$message({
                    type: "warning",
                    message: `培养计划正在审核中，请等待审核通过后再进行缴费`
                });
                return;
            } else if (this.studentData.statusPlan != 3) {
                this.$message({
                    type: "warning",
                    message: `培养计划未提交，请提交并审核通过后再进行缴费`
                });
                return;
            }
            this.$refs.payment.open();
            let data = JSON.parse(JSON.stringify(this.planData)).filter(el => {
                return el.selCourse == "已选";
            });
            this.paymentDialogData = data.map(el => {
                el.columnList = [];
                // el.isPay = Math.random() > 0 ? "已缴费" : "未缴费";
                return el;
            });
            let selectData = this.paymentDialogData.filter(el => {
                return el.isPay == "已缴费";
            });
            if (data.length == selectData.length) {
                this.paymentSelect = false;
                this.showPaymentBtn = false;
                this.paymentBtnName = "关闭";
            } else if (selectData != 0) {
                this.paymentBtnName = "继续缴费";
            } else if (selectData == 0) {
                this.paymentBtnName = "前往缴费";
            }
        },
        paymentSelectChange(val) {
            let code = val.map(el => {
                return el.courseCode;
            });
            this.params.courseCode = code.join(",");
            this.params.callBackData.courseCode = code.join(",");
        },
        courseChange(val) {
            let entranceTerm = this.coursePlanList
                .filter(el => {
                    return el.value == val;
                })
                .map(el => {
                    return el.value;
                });
            this.term = entranceTerm;
            this.getTemplate();
            this.getCustomData();
        },
        getCoursePlanList() {
            if (this.isShow) return;
            let params = { studentId: this.studentId };
            findAllMinorStudentCulture(params).then(({ code, data }) => {
                if (code == 200) {
                    this.coursePlanList = data.map(el => {
                        return {
                            label: el.cultureName,
                            value: el.entranceTerm
                        };
                    });
                    if (this.coursePlanList.length > 0) {
                        this.coursePlanValue = this.coursePlanList[0].label;
                    }
                }
            });
        },
        setPaymentParams() {
            let params = {
                studentId: this.studentId,
                feeItemCode: "jwc6-01",
                courseCode: [],
                callBackData: {
                    cultrueSchemeId: this.studentData.cultureId,
                    courseCode: []
                }
            };
            this.params = params;
        },
        aboutPay() {
            this.payDialogTitle = "关于缴费";
            this.$refs.signDialog.open();
        },
        closeSignDialog() {
            this.$refs.signDialog.close();
        },
        viewCourse(row) {
            this.courseDetail = row;
            this.$refs.courseDetailDialog.open();
        },
        closeDetailDialog() {
            this.$refs.courseDetailDialog.close();
        },
        goBack() {
            this.$emit("goBack");
        },
        catCulture(id) {
            if (this.showChapter) {
                this.templateId = id;
                this.type = 2;
                this.baseInfo = false;
            } else {
                let params = {
                    id,
                    flag: this.isShow,
                    type: 2
                };
                this.$emit("catCulture", params);
            }
        },
        selectClick({ row }) {
            if (row.select == "选择") {
                row.selCourse = "已选";
                row.select = "退选";
            } else {
                row.selCourse = "未选";
                row.select = "选择";
            }
        },
        cancelSelectForm() {
            this.$refs.planDialog.close();
        },
        scoreCompare() {
            let flag = true;
            let label = "";
            let credit = "";
            this.headData.forEach(el => {
                let count = 0;
                this.planDialogData
                    .filter(item => {
                        return (
                            item.labelId == el.labelId &&
                            item.selCourse == "已选"
                        );
                    })
                    .forEach(item => {
                        count += parseFloat(item.credits);
                    });
                if (parseFloat(el.credit) > count) {
                    if (flag) {
                        flag = false;
                        label = el.label;
                        credit = el.credit;
                    }
                }
            });
            return {
                flag,
                label,
                credit
            };
        },
        dealDivideData() {
            let flag = true;
            let params = {};
            this.relGroups.forEach(el => {
                let divideCourse = this.planDialogData.filter(item => {
                    return el.id == item.courseGroupId;
                });
                if (flag) {
                    params = this.resolveDivide(divideCourse, el);
                    if (params && params.divideFlag === false) flag = false;
                }
            });
            return params;
        },
        resolveDivide(divideCourse, divideRule) {
            let divideFlag = true;
            let selectCourse = divideCourse.filter(el => {
                return el.selCourse == "已选";
            });
            if (selectCourse.length == 0) {
                return {
                    divideCourse,
                    divideFlag,
                    divideRule
                };
            } else if (divideRule.type == 0) {
                // 门数限制
                if (selectCourse.length != divideRule.minNum) {
                    divideFlag = false;
                }
            } else if (divideRule.type == 1) {
                let count = 0;
                selectCourse.forEach(el => {
                    count += parseFloat(el.credits);
                });
                // 学分限制
                if (divideRule.expression == 1) {
                    // 学分大于等于设定值 divideRule.minCredits
                    if (count < divideRule.minCredits) {
                        divideFlag = false;
                    }
                } else if (divideRule.expression == 2) {
                    if (count != divideRule.minCredits) {
                        divideFlag = false;
                    }
                }
            }
            return {
                divideCourse,
                divideFlag,
                divideRule
            };
        },
        confirmSelectForm(val) {
            let {
                divideFlag,
                divideCourse,
                divideRule
            } = this.dealDivideData();
            if (divideFlag == false) {
                let { minNum, type, minCredits, expression } = divideRule;
                let course = divideCourse.map(el => {
                    return el.name;
                });
                if (type == 0) {
                    this.$message({
                        type: "warning",
                        message: `课程名称为${course.join(
                            ","
                        )}的课程分组只能选择${minNum}门!`
                    });
                } else if (type == 1) {
                    if (expression == 1) {
                        this.$message({
                            type: "warning",
                            message: `课程名称为${course.join(
                                ","
                            )}的课程分组学分至少需要${minCredits}分!`
                        });
                    } else if (expression == 2) {
                        this.$message({
                            type: "warning",
                            message: `课程名称为${course.join(
                                ","
                            )}的课程分组学分只需要${minCredits}分!`
                        });
                    }
                }
                return;
            }
            if (!this.validatePlan()) return;
            let { flag, credit, label } = this.scoreCompare();
            if (!flag) {
                this.$message({
                    type: "warning",
                    message: `已选${label}学分小于设定学分${credit}分，请重新选择!`
                });
                return;
            }
            let params = this.plan.map(el => {
                let setSelect = this.planDialogData.filter(item => {
                    return item.id == el.courseLabelRelationId;
                });
                el.selCourse = setSelect[0].selCourse == "已选" ? 1 : 0;
                return el;
            });
            setCulturePlan(params).then(({ code, res }) => {
                if (code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功!"
                    });
                    if (val == "submit") {
                        this.$eduConfirm(
                            "请确认是否提交个人培养计划？提交后不可撤销",
                            "提示"
                        ).then(() => {
                            this.schemeCheck = true;
                            this.$refs.schemeCheck.initCultureSchemeInfo();
                        });
                    } else {
                        this.getCustomData();
                        this.getTemplate();
                    }
                }
            });
        },
        submitSelectForm() {
            this.confirmSelectForm("submit");
        },
        closeSchemeCheckDialog() {
            this.schemeCheck = false;
        },
        submitSuccess() {
            this.getTemplate();
            this.cancelSelectForm();
            this.schemeCheck = false;
        },
        getBaseInfo() {
            findUserInfoByIdType(this.studentId, 1).then(({ data, code }) => {
                if (code === 200) {
                    if (data && data.photo) {
                        let photo = data.photo;
                        downloadimage(photo).then(res => {
                            this.imageUrl = res.data;
                        });
                    }
                }
            });
        },
        validatePlan() {
            let { startTime, endTime, statusPlan } = this.studentData;
            if (!startTime || !endTime) {
                this.$message({
                    type: "warning",
                    message: "未设置制定计划时间，无法制定计划!"
                });
                return false;
            } else if (startTime && startTime > moment().valueOf()) {
                this.$message({
                    type: "warning",
                    message: "制定计划时间未开始!"
                });
                return false;
            } else if (endTime && endTime < moment().valueOf()) {
                this.$message({
                    type: "warning",
                    message: "制定计划时间已过期!"
                });
                return false;
            } else if (statusPlan == 2) {
                this.$message({
                    type: "warning",
                    message: "当前计划正在审核中，无法再次制定!"
                });
                return false;
            } else if (statusPlan == 3) {
                this.$message({
                    type: "warning",
                    message: "当前计划已经审核通过，无法再次制定!"
                });
                return false;
            } else {
                return true;
            }
        },
        makePlan() {
            if (!this.validatePlan()) return;
            this.$refs.planDialog.open();
            this.planDialogData = JSON.parse(JSON.stringify(this.planData));
        },
        getTemplate(val) {
            let params = {
                studentId: this.studentId,
                entranceTerm: this.entranceTerm,
                byStuSelf: this.isShow ? 2 : 1
            };
            if (this.term) {
                params.entranceTerm = this.term;
            }
            findMinorStudentCulture(params).then(({ code, data }) => {
                if (code === 200) {
                    if (data.length == 0) return;
                    this.studentData = data[0];
                    if (data[0].enrolDate) {
                        let enrolDate = this.studentData.enrolDate.toString();
                        this.studentData.enrolDate = `${enrolDate.substr(
                            0,
                            4
                        )}-${enrolDate.substr(4, 2)}-${enrolDate.substr(6, 2)}`;
                    }
                    if (val == "init") {
                        this.getCustomData();
                        this.getBaseInfo();
                        this.getCoursePlanList();
                    }
                }
            });
        },
        getCustomData() {
            let params = {
                id: this.studentId,
                entranceTerm:
                    this.entranceTerm || this.studentData.entranceTerm,
                byStuSelf: this.byStuSelf,
                planType: this.isShow ? 1 : 2
            };
            if (this.showChapter) {
                params.byStuSelf = 1;
            }
            if (this.term) {
                params.byStuSelf = 2;
                params.entranceTerm = this.term;
            }
            getMinorCulturePlan(params)
                .then(({ code, data, msg }) => {
                    if (code === 200) {
                        this.showPlanFlag = true;
                        this.getScoreData(data);
                        this.getPlanData(data);
                    } else {
                        this.$nextTick(() => {
                            this.errorMsg = msg;
                            this.showPlanFlag = false;
                        });
                    }
                })
                .catch(() => {
                    this.$nextTick(() => {
                        this.showPlanFlag = false;
                    });
                });
        },
        getScoreData({ minorCoursesLabelList, creditSumMap }) {
            let newData = minorCoursesLabelList.map(el => {
                return {
                    completedCredit: el.completedCredit,
                    credit: el.credit
                };
            });
            if (newData.length === 0) {
                return;
            }
            this.scoreData = [
                {
                    courseType: "学分小计",
                    a: `${newData[0].completedCredit}/${newData[0].credit}`,
                    b: `${newData[1].completedCredit}/${newData[1].credit}`,
                    c: `${newData[2].completedCredit}/${newData[2].credit}`
                },
                {
                    courseType: "学分总计",
                    a: `${creditSumMap.completedCreditSum}/${
                        creditSumMap.creditSum
                    }`,
                    columnList: [
                        {
                            index: 1,
                            rowspan: 1,
                            colspan: 3
                        },
                        {
                            index: 2,
                            rowspan: 1,
                            colspan: 0
                        },
                        {
                            index: 3,
                            rowspan: 1,
                            colspan: 0
                        }
                    ]
                }
            ];
        },
        getPlanData({
            minorCoursesLabelList,
            courseLabelRelationList,
            minorRelationCoursesRelationList,
            minorCulturePlanList,
            relGroups
        }) {
            this.relGroups = relGroups;
            this.plan = minorCulturePlanList;
            this.headData = minorCoursesLabelList;
            let headData = minorCoursesLabelList;
            let contentData = [];
            let tableData = [];
            headData.forEach((el, index) => {
                contentData = courseLabelRelationList.filter(item => {
                    return el.labelId === item.labelId;
                });
                contentData = contentData.map((item, index) => {
                    item.courseType = el.label;
                    item.columnList = [];
                    item.columnList.push({
                        index: 0,
                        rowspan: index === 0 ? contentData.length : 0,
                        colspan: 1
                    });
                    minorCulturePlanList
                        .filter(el => {
                            return el.courseLabelRelationId == item.id;
                        })
                        .map(e => {
                            item.selCourse = e.selCourse == 1 ? "已选" : "未选";
                            item.select = e.selCourse == 1 ? "退选" : "选择";
                            item.score = e.score;
                            item.isScorePass =
                                e.isScorePass == 1 ? "已完成" : "未完成";
                            item.isPay = e.isPay == 1 ? "已缴费" : "未缴费";
                        });

                    item.week = `${item.period}/${item.weeks}`;
                    item.examModeName = item.examMode == 1 ? "考查" : "考试";
                    return item;
                });
                let newData = this.resolveDivideData(contentData);
                tableData = [...tableData, ...newData];
            });
            let columnList = [];
            for (let i = 0; i < 11; i++) {
                let index = i;
                let rowspan = 1;
                let colspan = 1;
                if (i == 0) {
                    colspan = 4;
                } else if (i == 4 || i == 5) {
                    colspan = 1;
                } else if (i == 6) {
                    colspan = 6;
                } else {
                    colspan = 0;
                }
                columnList.push({ index, rowspan, colspan });
            }
            let credits = 0;
            let weeks = 0;
            let period = 0;
            courseLabelRelationList.forEach(el => {
                credits += el.credits ? parseFloat(el.credits) : 0;
                weeks += el.weeks ? parseFloat(el.weeks) : 0;
                period += el.period ? parseFloat(el.period) : 0;
            });
            tableData.push({
                courseType: "总计",
                credits,
                week: `${period}/${weeks}`,
                columnList
            });
            this.planData = [...tableData];
            this.setPaymentParams();
        },
        resolveDivideData(contentData) {
            let newData = contentData.sort((a, b) => {
                return a.courseGroupId - b.courseGroupId;
            });
            let arr = Array.from(
                new Set(
                    contentData.map(el => {
                        return el.courseGroupId;
                    })
                )
            );
            let newArr = [];
            arr.map(el => {
                let sameCourseGroup = newData.filter(item => {
                    return item.courseGroupId === el;
                });
                sameCourseGroup = sameCourseGroup.map((row, index) => {
                    if (row.courseGroupId != "" && sameCourseGroup.length > 1) {
                        row.divideName = row.courseGroupName;
                        if (index === 0) {
                            row.columnList.push({
                                index: 3,
                                rowspan: sameCourseGroup.length,
                                colspan: 1
                            });
                        } else {
                            row.columnList.push({
                                index: 3,
                                rowspan: 0,
                                colspan: 1
                            });
                        }
                    }
                    return row;
                });
                newArr = [...newArr, ...sameCourseGroup];
            });
            return newArr;
        }
    }
};
</script>

<style lang="scss" scoped>
.a-blue {
    color: blue;
}
.a-red {
    color: red;
}
.custom-plan {
    .back {
        text-align: center;
        margin: 24px;
    }
    .my-centent-title,
    .my-cultrue-title {
        color: red;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 0 60px;
    }
    .my-cultrue-title {
        color: blue;
    }
    .align-right {
        display: flex;
        justify-content: flex-end;
    }
    .title {
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #2b3b4e;
        letter-spacing: 0;
        line-height: 20px;
        margin-bottom: 24px;
    }
    .basic-div {
        display: flex;
        vertical-align: middle;
        align-items: center;
        margin-bottom: 12px;
        .head-portrait {
            width: 40px;
            height: 40px;
            margin-right: 12px;
        }
        .span-style {
            font-size: 14px;
        }
    }
    .line-div {
        border: 1px solid #f1f1f1;
        margin: 0 0 20px 0;
    }
    .centent-title {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    .content-container {
        padding: 0 60px;
        .title {
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #2b3b4e;
            letter-spacing: 0;
            line-height: 20px;
            margin-bottom: 16px;
        }
        .score-table {
            margin-bottom: 32px;
            .not-pay {
                color: red;
            }
        }
    }
}
</style>
